"use client"
import React, { FC } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Eclipse, Zap, BookMarked, Bot, Wrench } from "lucide-react"
import UserMenu from "@/components/apps/user-menu"
import ThemeToggle from "@/components/theme/theme-toggle"
import { cn } from "@/lib/utils"

type Props = {
  children: React.ReactNode
}

const navLink = [
  {
    name: "探索",
    href: "/explore",
    icon: <Eclipse className="w-4 h-4" />
  },
  {
    name: "工作室",
    href: "/apps",
    icon: <Bot className="w-4 h-4" />
  },
  {
    name: "知识库",
    href: "/datasets",
    icon: <BookMarked className="w-4 h-4" />
  },
  {
    name: "工作台",
    href: "/tools",
    icon: <Wrench className="w-4 h-4" />
  }
]

const CommonLayout: FC<Props> = (props) => {
  const { children } = props
  const location = usePathname()

  return (
    <div className="flex flex-col h-screen bg-gray-50 dark:bg-gray-900">
      <header className="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center space-x-3">
          <div className="flex items-center justify-center w-8 h-8 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg">
            <Zap className="text-white w-6 h-6" />
          </div>
          <h1 className="text-lg font-bold text-gray-900 dark:text-white whitespace-nowrap">Flow Forge</h1>
        </div>

        {/* 导航 */}
        <div className="flex-1 flex items-center justify-center gap-3">
          {navLink.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center h-8 px-3 rounded-xl text-sm",
                location === item.href || (item.href === "/apps" && location.includes("/workflow"))
                  ? "text-blue-700 font-bold bg-white shadow-md"
                  : "text-gray-500 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
              )}
            >
              {item.icon}
              <div className="ml-2">{item.name}</div>
            </Link>
          ))}
        </div>

        <div className="flex items-center space-x-4">
          {/* 主题切换 */}
          <ThemeToggle />
          {/* 用户菜单 */}
          <UserMenu />
        </div>
      </header>
      <main className="flex-1 overflow-y-auto">{children}</main>
    </div>
  )
}

export default CommonLayout
